<!-- 评论模板-->
<template>
  <sn-row-has-two-col :left="2" :right="22" class="remark-template">
    <!-- 用户头像-->
    <div slot="one-col">
      <el-avatar :src="user.image" alt=""/>
      <i :class="getVipLevel"></i>
    </div>
    <div slot="two-col">
      <!-- 用户名 -->
      <sn-text
          font-color="#999"
          :font-size="16"
          :text="user.username"
          class="margin-bottom"/>
      <!-- 用户详细信息-->
      <sn-row-has-two-col :left="21" :right="3">
        <!--  评论日期 -->
        <div slot="one-col" class="to-flex">
          <sn-text
              font-color="#999"
              :font-size="16"
              :text="user.remarkDate"
              class="margin-right"/>
          <!-- 评分-->
          <el-image :src="score" class="score-icon" v-for="item in 5"/>
        </div>
        <!-- 点赞数-->
        <div slot="two-col" class="to-flex">
          <el-link :underline="false" @click="toZan()">
            <el-image :src="zan" class="zan" v-if="isZan"/>
            <el-image :src="notZan" class="zan" v-else/>
          </el-link>
          <sn-text
              font-color="#999"
              :font-size="16"
              :number="Number(user.giveLikeNumber)"
              :move-down="2"/>
        </div>
      </sn-row-has-two-col>
      <!-- 评论-->
      <p class="user-remark">
        {{ user.remarkContent }}
      </p>
    </div>
  </sn-row-has-two-col>
</template>

<script>
export default {
  name: "IntroduceRemark",
  data() {
    return {
      level1: false,
      level2: false,
      level3: false,
      level4: false,
      level5: false,
      zan: require('@/assets/image/movie/zan.png'),
      notZan: require('@/assets/image/movie/notzan.png'),
      score: require('@/assets/image/movie/score.png'),
      isZan: false
    }
  },
  computed: {
    getVipLevel() {
      return {
        level1: this.level1,
        level2: this.level2,
        level3: this.level3,
        level4: this.level4,
        level5: this.level5,
      }
    }
  },
  props: {
    user: {
      type: Object,
      default() {
        return {}
      }
    },
    rIndex: {
      type: Number,
      default() {
        return {}
      }
    }
  },
  methods: {
    toZan() {
      //先判断是否登录
      //测试
      let user = this.$store.state.user.userId
      if (user === 0) {
        this.myUtils.toLoginMessage(this)
      } else {
        this.isZan = !this.isZan
        if (this.isZan) {
          this.isZan = 1
        } else {
          this.isZan = 0
        }
        this.$http({
          url: `/web/user/approval/save`,
          method: 'post',
          data: this.$http.adornData({
                "userId": this.$store.state.user.userId,
                "remarkId": this.$store.state.movieDetailInfo.remarks[this.rIndex].remarkId,
                "giveLikeStatus": this.isZan
              }
          )
        })
      }
    },
    init() {
      //当前用户是否对当前评论点赞
      if (Number(this.user.isGiveLike) === 0) {
        this.isZan = false
      } else {
        this.isZan = true
      }
      //会员等级
      let level = Number(this.user.vipLevel)
      switch (level) {
        case 1:
          this.level1 = true
          this.level2 = false
          this.level3 = false
          this.level4 = false
          this.level5 = false
          break
        case 2:
          this.level1 = false
          this.level2 = true
          this.level3 = false
          this.level4 = false
          this.level5 = false
          break
        case 3:
          this.level1 = false
          this.level2 = false
          this.level3 = true
          this.level4 = false
          this.level5 = false
          break
        case 4:
          this.level1 = false
          this.level2 = false
          this.level3 = false
          this.level4 = true
          this.level5 = false
          break
        case 5:
          this.level1 = false
          this.level2 = false
          this.level3 = false
          this.level4 = false
          this.level5 = true
          break
      }
    }
  },
  created() {
    this.init()
  }
}
</script>

<style scoped>
.level1 {
  display: inline-block;
  width: 20px;
  height: 20px;
  position: absolute;
  left: 25px;
  top: 20px;
  background: url();
}

.level2 {
  display: inline-block;
  width: 20px;
  height: 20px;
  position: absolute;
  left: 25px;
  top: 20px;
  background: url();
}

.level3 {
  display: inline-block;
  width: 20px;
  height: 20px;
  position: absolute;
  left: 25px;
  top: 20px;
  background: url();
}

.level4 {
  display: inline-block;
  width: 20px;
  height: 20px;
  position: absolute;
  left: 25px;
  top: 20px;
  background: url();
}

.level5 {
  display: inline-block;
  width: 20px;
  height: 20px;
  position: absolute;
  left: 25px;
  top: 20px;
  background: url();
}

.zan {
  width: 20px;
  height: 20px;
  margin-right: 5px;
  margin-left: 20px;
}

.score-icon {
  width: 20px;
  height: 20px;
}

.user-remark {
  color: #999;
  font-size: 14px;
  line-height: 30px;
}

.remark-template {
  margin-top: 15px;
}
</style>
